import React, { useState, useEffect, useRef } from 'react';
import './index.less';
export default function Card(props) {
    const [time, setTime] = useState(10)
    let Interval = useRef()
    
    useEffect(() => {
        down()
    }, [])

    const down = () => {
        Interval.current = setInterval(() => {
            if (time > 0) {
                setTime(a => a - 1)
            } else {
                if (time <= 0) {
                    clearInterval(Interval.current)
                }
            }
        }, 1000)
    }

    useEffect(() => {
        console.log(time,'time');
        if (time <= 0) {
            clearInterval(Interval.current)
        }
    }, [time])

    const { data } = props;
    return (
        <div className="card">
            <div className="card-left">
                <div className="card-left-title">
                    <img src={data?.brandLogo} />
                    <div className='card-left-titleContent'>{data?.brandName}</div>
                </div>
                <div className='card-left-bottom'>
                    <img className='card-left-bottom-showImg' src={data?.campImage} />
                </div>
            </div>
            <div className='card-left-content'>
                <div className='icon'>
                    {Array.isArray(data.promoLogo) ? data.promoLogo.map(v => <img key={v} src={v} />) : <img src={data.promoLogo} />}
                </div>
                <div className='price'>
                    {data.voucherDesc}
                </div>
                <div className='price'>
                    {data.benefitAmount}
                </div>
            </div>

            <div className='card-left-right'>
                <div className='button' >
                    {time === 0 ? <span>抢购</span> : <span>{time + 's'}</span>}
                </div>
            </div>
        </div>
    );
};